<template>
  <div class="login_wrap">
    <div class="login_card_wrap">
      <div class="card_n_box">
        <div class="left_box">
          <div class="title_box">
            <span class="title_text">实验室药品仪器管理中心</span>
          </div>
          <div class="login_form_box">
            <el-form
              :label-position="'top'"
              ref="loginFormRef"
              :rules="loginFormRules"
              label-width="auto"
              :model="loginFormData"
              style="max-width: 600px"
              @keyup.enter="loginClick"
            >
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="loginFormData.userName" />
              </el-form-item>
              <el-form-item label="密码" prop="userPwd">
                <el-input type="password" v-model="loginFormData.userPwd" />
              </el-form-item>
              <div class="sliding_block_v_box">
                <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
                <el-button
                  v-if="!isSuccessSlidingBlockV"
                  style="width: 100%"
                  @click="onShow"
                  type="primary"
                  size="large"
                  plain
                >
                  <i
                    class="iconfont icon-clickToVerify"
                    style="margin-right: 6px; position: relative; top: -0.8px"
                  ></i>
                  <span>点击进行验证</span>
                </el-button>
                <el-button
                  v-else
                  style="width: 100%"
                  type="success"
                  size="large"
                  plain
                >
                  <i
                    class="iconfont icon-sliderVerificationSucceeded"
                    style="margin-right: 6px"
                  ></i>
                  <span>验证通过</span>
                </el-button>
              </div>
              <el-form-item>
                <el-button
                  style="
                    width: 100%;
                    background-color: #2a8ff4;
                    margin-top: 40px;
                  "
                  size="large"
                  type="primary"
                  @click="loginClick(loginFormRef)"
                >
                  <span style="letter-spacing: 8px; padding-left: 10px"
                    >登录</span
                  >
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="right_box">
          <img class="fx_img" src="./image/fx.png" alt="" />
          <span class="right_title">让管理更方便</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'Login',
})
</script>
<script setup>
import Vcode from 'vue3-puzzle-vcode'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { loginApi } from '@/api/user'
import { useUserStore, useRouterStore } from '@/store'

// router
const router = useRouter()

// userStore
const userStore = useUserStore()

// routerStore
const routerStore = useRouterStore()

// 是否通过滑块验证的标识
const isSuccessSlidingBlockV = ref(false)

const isShow = ref(false)

const onShow = () => {
  isShow.value = true
}

const onClose = () => {
  isShow.value = false
}

const onSuccess = () => {
  onClose() // 验证成功，手动关闭模态框
  isSuccessSlidingBlockV.value = true
}

// 登录表单Ref
const loginFormRef = ref()

// 登录表单数据
const loginFormData = ref({
  userName: '',
  userPwd: '',
})

// 登录请求函数
const loginFunc = async () => {
  let data = {
    account: loginFormData.value.userName,
    psw: loginFormData.value.userPwd,
  }
  await loginApi(data)
    .then((res) => {
      console.log('登录成功', res)
      router.push({
        path: '/home',
      })
      userStore.userInfo = res.data
      userStore.setToken(res.data.accessToken)
    })
    .catch(() => {
      console.log('登录失败')
      router.push({
        path: '/home',
      })
    })
}

// 登录点击事件
const loginClick = async (ruleLoginFormRef) => {
  routerStore.setRoleMenuListFunc()
  // if (!loginFormRef.value) return
  // await loginFormRef.value.validate((valid, fields) => {
  //   // 表单校验
  //   if (valid) {
  //     console.log('submit!')
  //     // 判断是否通过滑块校验
  //     if (!isSuccessSlidingBlockV.value) {
  //       ElMessage.error('请先点击进行验证！')
  //     } else {
  //       console.log('登录', loginFormData.value)
  //       // loginFunc()
  router.push({
    path: '/home',
  })
  //     }
  //   } else {
  //     console.log('error submit!', fields)
  //   }
  // })
}

// 登录表单校验规则
const loginFormRules = ref({
  userName: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    },
  ],
  userPwd: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
    { min: 6, max: 15, message: '密码长度为5-12位', trigger: 'blur' },
  ],
})
</script>

<style lang="scss" scoped>
.login_wrap {
  width: 100vw;
  height: 100vh;
  background: url(./image/bg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;

  .login_card_wrap {
    // border: 1px solid red;
    width: 960px;
    height: 600px;
    background: url(./image/card_bg_mask.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -50%);

    .card_n_box {
      // border: 1px solid red;
      width: 91.4%;
      height: 87%;
      border-radius: 14px;
      position: relative;
      top: 3%;
      left: 1.2%;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      overflow: hidden;

      .left_box {
        width: 460px;
        height: 100%;
        // border: 1px solid red;

        background-color: white;

        .title_box {
          width: 100%;
          height: 160px;
          line-height: 160px;
          text-align: center;
          // height: 20%;
          // line-height: 20%;
          .title_text {
            font-size: 28px;
            letter-spacing: 6px;
            font-family: 'ZaoZiGongFangJianHei';
            // color: white;
          }
        }

        .login_form_box {
          // border: 1px solid red;
          height: 69%;
          padding: 10px 70px 30px 70px;

          .sliding_block_v_box {
            padding: 10px 0px 0px 0px;
            margin-top: 14px;
          }
        }
      }

      .right_box {
        flex: 1;
        // border: 1px solid red;
        position: relative;

        .right_title {
          width: 100%;
          display: inline-block;
          position: absolute;
          top: 38%;
          text-align: center;
          font-size: 32px;
          letter-spacing: 10px;
          font-family: 'ZQKLKT';
          color: white;
        }

        .fx_img {
          // width: 800px;
          // border: 1px solid red;
          position: absolute;
          bottom: -78px;
          right: -195px;
          transform: scale(0.56);
        }

        .mx_box {
          width: 100%;
          height: 400px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          border: 1px solid red;

          img {
            width: 120px;
            height: 120px;
          }
        }
      }
    }
  }
}

// input
:deep(.el-input) {
  .el-input__wrapper {
    .el-input__inner {
      letter-spacing: 1px;
    }
  }
}
</style>
